<template>
  <n-user-info :selected="3">
    <add-address :isOpenAdd="isOpenAdd" :addressInfos="addressInfos" @closeDialog="isOpenAdd = false"></add-address>
    <update-address :addressData="addressData" :isOpenUpdate="isOpenUpdate" @closeDialog="isOpenUpdate = false"></update-address>
    <div style="background-color: #fff; padding: 20px; margin-bottom: 20px;">
      <el-button
        color="#3271ae"
        @click="isOpenAdd=true"
      >新增收货地址</el-button>
      <el-card
        v-for="(item, index) in addressInfos"
        :key="index"
        style="margin: 10px 0;"
      >
        <template #header>
          <div style="display: flex; justify-content: space-between;">
            <div style="display: flex; flex-direction: row;">
              <span style="font-size: 18px; font-weight: 600; color: #666666;">
                {{ item.name }}
              </span>
              <el-tag
                v-show="item.isDefault === 0"
                style="margin-left: 10px;"
              >
                默认地址
              </el-tag>
            </div>

            <el-icon class="text-hover" @click="doDelAddress(item.addressId)">
              <Close />
            </el-icon>
          </div>
        </template>
        <div
          v-for="(value, key, index1) in labels"
          :key="index1"
          style="width: 450px; height: 22px; display: flex; font-size: 15px; font-weight: 350;"
        >
          <div style="width: 75px; text-align: right; margin-right: 10px; color: #999999;">
            {{ value }}:
          </div>
          {{ item[key] }}
        </div>

        <div style="text-align: right; font-size: 12px;">
          <span
            class="text-hover"
            v-show="item.isDefault !== 0"
            style="margin-right: 10px;"
            @click="doSetDefaultAddress(item.addressId, index)"
          >设置默认</span>
          <span class="text-hover" @click="update(index)">编辑</span>
        </div>
      </el-card>
    </div>
  </n-user-info>
</template>

<script>
import NUserInfoVue from "@/components/NUserInfo.vue";
import AddAddressVue from "@/components/address/AddAddress.vue";
import UpdateAddressVue from "@/components/address/UpdateAddress.vue";

import { selectAllAddress, delAddress, setDefaultAddress } from "@/api/address";

export default {
  components: {
    NUserInfo: NUserInfoVue,
    AddAddress: AddAddressVue,
    UpdateAddress: UpdateAddressVue
  },
  data() {
    return {
      isOpenAdd: false,
      isOpenUpdate: false,
      addressData: {},
      addressInfos: [],
      labels: {
        consignee: "收货人",
        area: "所在地址",
        address: "地址",
        phone: "手机",
      },
    };
  },
  methods: {
    doSelectAllAddress() {
        selectAllAddress().then(res => {
            this.addressInfos = res
        })
    },
    doDelAddress(index) {
      delAddress(index).then(res => {
        this.addressInfos = this.addressInfos.filter((v, i, a) => v.addressId != index)
      })
    },
    doSetDefaultAddress(id, index) {
      var temp = null
      setDefaultAddress(id).then(res => {
        this.addressInfos[0].isDefault = 1
        this.addressInfos[index].isDefault = 0
        temp = this.addressInfos.splice(index, 1)
        this.addressInfos = [temp[0], ...this.addressInfos]
      })
    },
    
    update(index) {
        this.isOpenUpdate = true
        this.addressData = this.addressInfos[index]
    }
  },
  created() {
    this.doSelectAllAddress()
  }
};
</script>

<style scoped>
.text-hover:hover {
  color: #3271ae;
  cursor: pointer;
}
</style>